import React, { useEffect, useState } from 'react';
import { Descriptions, Modal, Divider, Button } from 'antd'
import { showMsg } from '@/utils/utils';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { print, isNull } from '@/utils/utils';
import { getWorkerServiceListDetail } from '@/services/order/api';
import './style.less';

const FeeDetailDialog: React.FC<any> = (props) => {
  const {
    handleModalVisible,
    detail,
    order_id
  } = props;

  const [list, setList] = useState([]);
  const [beginDate, setBeginDate] = useState('');
  const [endDate, setEndDate] = useState('待定');

  const columns: ProColumns<STOCKGOODSAPI.GoodsItem>[] = [
    {
      title: '护工编号',
      dataIndex: 'worker_no',
      width: 70
    },
    {
      title: '护工姓名',
      dataIndex: 'worker_name',
      width: 80
    },
    {
      title: '服务单号',
      dataIndex: 'service_id',
      className: 'wordbreak',
      // width: 300,
    },
    {
      title: '服务开始时间',
      dataIndex: 'begin_time',
      // width: 140
    },
    {
      title: '服务结束时间',
      dataIndex: 'end_time',
      // width: 140
    },
    {
      title: '服务单价（天）',
      dataIndex: 'service_price',
      valueType: 'money',
      align: 'right',
      width: 120,
    },
    {
      title: '服务天数',
      dataIndex: 'check_day',
      width: 120,
      align: 'right',
    },
    {
      title: '服务费',
      dataIndex: 'check_total_price',
      width: 90,
      valueType: 'money',
      align: 'right',
    },
    // {
    //   title: '核算状态',
    //   dataIndex: 'is_check',
    //   width: 60,
    //   align: 'right',
    //   render: (val, entity) => {
    //     return entity.is_check === 'Y' ? '已核算' : '待核算'
    //   }
    // }
  ]

  const [fetchDataDone, setFetchDataDone] = useState(false);

  useEffect(() => {
    if (fetchDataDone) {
      setTimeout(() => {
        print(document.querySelector('.fee-deatial-dialog .ant-modal-body'), {
          // printZoom: 0.85
          size: 'landscape'
        })
      }, 500)
    }
  }, [fetchDataDone]);

  return <Modal
    width="80%"
    maskClosable={false}
    className="fee-deatial-dialog hengprint"
    onCancel={() => handleModalVisible(false)}
    footer={null}
    visible>
    <div className="dialog">
      <h2 className="tc">服务档案</h2>
      <Divider style={{ paddingBottom: 10 }} />
      <div>1.档案信息</div>
      <Divider />
      <Descriptions className="bill-info-list" column={5}>
        <Descriptions.Item label="姓名">
          {detail.patient_name}
        </Descriptions.Item>
        <Descriptions.Item label="住院号/身份证号" span={2}>
          {detail.admission_num || detail.identity_no}
        </Descriptions.Item>
        <Descriptions.Item label="联系人">
          {detail.liaison_name || '-'}
        </Descriptions.Item>
        <Descriptions.Item label="电话">
          {detail.liaison_mobile || '-'}
        </Descriptions.Item>

        <Descriptions.Item label="服务内容">
          {detail.service_content === 'P' ? '陪诊' : detail.service_content === 'H' ? '护理' : ''}
        </Descriptions.Item>
        <Descriptions.Item label="服务周期" span={2}>
          {beginDate} - {endDate}
        </Descriptions.Item>
        <Descriptions.Item label="服务天数">
          {Number(detail.nurse_day)}天
        </Descriptions.Item>
        <Descriptions.Item label="服务费">
          {detail.total_service_price}元
        </Descriptions.Item>
        <Descriptions.Item label="服务方式">
          {detail.service_type === 'I' ? '院内' : '院外'}
        </Descriptions.Item>
        <Descriptions.Item label="服务地址" span={4}>
          {detail.address}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions>
        <Descriptions.Item label="备注">
          {detail.remark || '无'}
        </Descriptions.Item>
      </Descriptions>

      <div style={{ marginTop: 10, marginBottom: 10 }}>2.服务记录</div>

      <Divider style={{ margin: '10px 0 0' }} />

      <ProTable<any>
        className='print_table'
        rowKey="service_id"
        options={false}
        search={false}
        columns={columns}
        pagination={false}
        request={async (params) => {
          if (!order_id) {
            return {
              data: [],
              total: 0,
              success: true
            }
          }
          try {
            params = Object.assign({}, params, { order_id, current: 1, pageSize: 10000 });
            const data = await getWorkerServiceListDetail(params);
            const ary = Object.assign([], data.record_list);
            data.record_list.forEach(element => {
              if (element.is_check !== 'Y') {
                element.end_time = '';
                element.check_day = '';
                element.check_total_price = '';
              }
            });
            const arr = ary.sort((a, b) => {
              return b.end_time.localeCompare(a.end_time)
            })
            if (!isNull(arr[arr.length - 1].end_time) && detail.order_status === 'F') {
              setEndDate(arr[0].end_time)
            }
            const arr1 = ary.sort((a, b) => {
              return a.begin_time.localeCompare(b.begin_time)
            })
            console.log('arr1', arr1)
            setBeginDate(arr1[0].begin_time);
            setList(arr);
            // setFetchDataDone(true);
            return {
              data: data.record_list,
              total: data.sum_record_num,
              success: true
            }
          } catch (error) {
            showMsg(error?.data?.errmsg);
            return {
              data: [],
              total: 0,
              success: true
            }
          }
        }}
        postData={data => { setFetchDataDone(true); return data; }}
        bordered />
    </div>
  </Modal>
}
export default FeeDetailDialog;
